<!-- 泵乳日志详情 -->
<!-- 
    2021年11月15日重置 
-->
<style>
  .wrapper[data=pumpBreastDetail] {
    width: 100%;
    min-height: 100%;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 0 5px rgba(0, 0, 0, .1);
    box-sizing: border-box;
    padding: 20px;
  }

  .wrapper[data=pumpBreastDetail] .botton {
    width: 90px;
    height: 32px;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    cursor: pointer;
  }

  pper[data=pumpBreastDetail] .botton i {
    font-size: 16px;
  }

  .wrapper[data=pumpBreastDetail] .botton span {
    font-size: 16px;
    line-height: 32px;
    margin-left: 10px;
  }
</style>

<body>
  <div class="wrapper" data="pumpBreastDetail">
    <div class="botton" @click="handleBack">
      <i class="el-icon-back"></i>
      <span>返回</span>
    </div>
    <el-table :key="tableKey" v-if="type === 1" :data="table.data" size="small" v-loading="table.loading" border>
      <el-table-column label="序号" width="80" align="center" prop="No" />
      <el-table-column label="泵乳日期" prop="dayStr" align="center" />
      <el-table-column align="center" label="产后天数">
        <template slot-scope="scope">
          {{ getDate(scope.row.dayStr) }}
        </template>
      </el-table-column>
      <el-table-column label="24小时总泵乳量(ml)" prop="breastQuantity" align="center" />
      <el-table-column label="24小时泵乳次数" prop="breastCount" align="center" />
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleToDetail(scope.row)">每次泵乳记录</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-table v-else :data="detail.data" size="small" border>
      <el-table-column label="序号" width="80" align="center" prop="No" />
      <el-table-column label="开始时间(左)" align="center" prop="leftBreastStartTime" />
      <el-table-column label="结束时间(左)" align="center" prop="leftBreastEndTime" />
      <el-table-column label="持续时间(左)" width="90" align="center">
        <template slot-scope="scope">
          {{ getKeepTime(scope.row.leftBreastStartTime, scope.row.leftBreastEndTime) }}
        </template>
      </el-table-column>
      <el-table-column label="开始时间(右)" align="center" prop="rightBreastStartTime" />
      <el-table-column label="结束时间(右)" align="center" prop="rightBreastEndTime" />
      <el-table-column label="持续时间(右)" align="center" width="90">
        <template slot-scope="scope">
          {{ getKeepTime(scope.row.rightBreastStartTime, scope.row.rightBreastEndTime) }}
        </template>
      </el-table-column>
      <el-table-column label="泵奶量(左)" align="center" width="90" prop="leftBreastQuantity" />
      <el-table-column label="泵奶量(右)" align="center" width="90" prop="rightBreastQuantity" />
      <el-table-column label="是否用药" align="center" width="90">
        <template slot-scope="scope">
          {{ scope.row.isUseDrug == 1 ? '是' : '否' }}
        </template>
      </el-table-column>
      <el-table-column label="用药备注" align="center">
        <template slot-scope="scope">
          {{ scope.row.useDrugRemark ? scope.row.useDrugRemark : '无' }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</body>
<script>
  require(['bbcare'], function ($bb) {
    var URL = $bb.baseUrl('followup')

    var vm = new Vue({
      el: '.wrapper',
      data: function () {
        return {
          param: null,
          type: 1,        // 1 是表层 2 是里层     
          table: {
            data: [],
            loading: false
          },
          detail: {
            data: []
          },
          tableKey: Math.random()
        }
      },
      created: function () {
        this.param = $('.content-main').data().params
        console.log(this.param)
        this.getTableData()
      },
      methods: {
        /**
         * 获取时间差
         */
        getKeepTime: function (start, end) {
          var start = new Date(start).getTime() / 1000
          var end = new Date(end).getTime() / 1000
          var reduce = Math.ceil((end - start) / 60)
          return reduce + '分钟'
        },
        /**
         * 查看详情
         * @param {*} row
         */
        handleToDetail: function (row) {
          row.rows.forEach(function (item, index) {
            item.No = index + 1
          })
          var that = this
          this.detail.data = row.rows
          this.table.loading = true
          setTimeout(function () {
            that.type = 2
            that.table.loading = false
          }, 500)
          this.$forceUpdate()
        },
        /**
         * 返回
         */
        handleBack: function () {
          if (this.type == 2) {
            this.type = 1
          } else {
            $bb.openPage('pumpBreastList')
          }
        },
        /**
         * 获取产后日期
         * @param { string } day
         */
        getDate: function (day) {
          var current = new Date(this.param.birth).getTime() / 1000
          var target = new Date(day).getTime() / 1000
          var reduce = Math.floor((target - current) / 3600 / 24)
          return reduce
        },
        /**
         * 获取列表数据
         */
        getTableData: function () {
          this.table.loading = true, that = this
          $bb.ajax({
            url: URL + 'followup/webapi/service/dumpBreastRecord/stat',
            data: JSON.stringify({
              patient_id: this.param.id
            }),
            success: function (res) {
              that.table.loading = false
              res.data.forEach(function (item, index) {
                item.No = index + 1
              })
              that.table.data = res.data
            }
          })
        }
      }
    })
  })
</script>